<template>
  <section class="star-box">
      <span class="star-list">
          <i class="star-icon el-icon-star-on" :class="{'star-icon-active' : i < activeNum }" v-for="(it,i) in starArr" :key="i"></i>
      </span>
  </section>
</template>

<script>
export default {
    name: 'star-box',
    props: ['activeNum'],
    data(){
        return {
            starArr: new Array(5)
        }
    }
}
</script>

<style lang="scss">
    .star-list{
        font-size:18px;
        .star-icon{ color:#e9e9e9; }
        .star-icon-active{ color:#f6821f; }
    }
</style>